<template>
    <div>
        <Layout title="流程" :showHome="false">
            <div class="content">
                <div class="item" v-for="it in list" :key="it.title">
                    <span class="title">{{it.title}}</span>
                    <div class="item-content">
                        <div class="func-item"
                            v-for="item in it.func"
                            @click="itemEvt(item)"
                            :key="item.name">
                            <div class="wrap">
                                <i :class="['icon', item.icon]"></i>
                            </div>
                            <span class="name">{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
        <Tabbar></Tabbar>
    </div>
</template>
<script setup>
    import Layout from '../../common/layout.vue';
    import Tabbar from '../components/tabbar/index.vue';
    import {Toast} from 'vant'
    import { useRouter } from 'vue-router';
    // import { reactive} from '@vue/runtime-core'
    import { commonDefinition } from '../../store'

    // let arr=reactive({
    //         rightList:[],
    //     })

    let userRole = commonDefinition().getUserRole

    const router = useRouter()
    const list = [{
        title:'我的流程',
        func:[{
                name:'考勤审批',
                id:'SYSTEM-01-02',
                right: 'C',
                icon:'shenpi',
                path:'/approval'
            },
            {
                name:'考勤申请',
                id:'SYSTEM-01-01',
                right: 'R',
                path:'/apply',
                icon:'shenqing',
            },
            {
                name:'考勤抄送',
                id:'SYSTEM-01-01',
                right: 'R',
                icon:'chaosong',
                },
            {
                name:'添加用户',
                id:'SYSTEM-01-02',
                right: 'C',
                icon:'userAdd',
                path:'/userAdd'
            },
            ]
    },
    {
        title:'流程发起',
        func:[{
                name:'请假',
                id:'SYSTEM-01-01',
                right: 'R',
                icon:'qingjia',
                path:'/apply',
            },
            {
                name:'外出',
                id:'SYSTEM-01-01',
                right: 'R',
                icon:'waichu',
            },
            {
                name:'加班',
                id:'SYSTEM-01-01',
                right: 'R',
                icon:'jiaban',
            },
            {
                name:'销假',
                id:'SYSTEM-01-01',
                right: 'R',
                icon:'xiaojia',
            },
            {
                name:'忘记打卡',
                id:'SYSTEM-01-01',
                right: 'R',
                icon:'buka',
            },
            {
                name:'考勤申诉',
                id:'SYSTEM-01-01',
                right: 'R',
                icon:'shensu',
            },

        ]
    }]
    function itemEvt(item){
        let myRight = userRole.find(it=>it.id===item.id)
        if(!item.path){
            Toast('该功能还未开放')
            return
        }else{
            if(myRight){
                router.push(item.path)
            }else{
                Toast('没有权限')
            }
        }
    }
</script>
<style lang="less" scoped>
    @import '../../style/common.less';

    .content{
        display: block;
        position: relative;
        padding: 20px 12px 0;
        .item{
            background: white;
            margin-bottom: 15px;
            padding: 0 18px 0;
            .title{
                display: block;
                height: 42px;
                line-height: 42px;
                font-size: .8rem;
                color:rgb(113, 105, 105);
                border-bottom:1px solid #ccc;
            }
            .item-content{
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                .func-item {
                    flex: 0 0 30%;
                    margin:0 10px 10px 0;
                    .wrap{
                        background: rgba(238, 140, 140, 0.3);
                        width: 80px;
                        height: 80px;
                        margin: 20px auto 0;
                        border-radius: 50%;
                        padding: 10px;
                        .icon {
                        display: block;
                        width: 64px;
                        height: 64px;
                        margin:auto;
                        background-position: center;
                        background-size: 42px;
                        background-repeat: no-repeat;
                        .loop(1);
                        // background: url(../../images/icons/shenqing.png) center center /48px 48px no-repeat;
                    }}
                    .name {
                            display: block;
                            font-size: .8rem;
                            text-align: center;
                            line-height: 40px;
                        }
                }
            }
        }
    }
    @arr: shenpi shenqing chaosong userAdd chakan qingjia waichu jiaban xiaojia buka shensu;
   
    .loop(@index) when(@index <= length(@arr)) {
        @name: extract(@arr, @index);

        &.@{name} {
            background-image: url("../../images/icons/@{name}.png");
        }
        .loop(@index + 1);
    }
</style>